<template>
    <div class="asset-detail sceneDetail">
        <Tabs v-model="tabName" :value="tabName" :animated="false" class="my-tabs demo-tabs-style2">
            <TabPane v-for="item in versionList" :key="item.id" :label="item.version" :name="item.id" class="my-tab-pane">
                <asset-detail-content
                    :productId="item.id"
                    :product-info="item"
                    :ref="item.id"
                    :refresh="refresh"
                    @update-versions-success="getProductVersions"
                    @delete-versions-success="getProductVersions"></asset-detail-content>
            </TabPane>
            <Button @click="handleTabsAdd" size="small" slot="extra" class="md-add-jh"></Button>
        </Tabs>
        <Modal
            :value="modal.show"
            title="新建版本"
            @on-ok="save"
            @on-cancel="modal.show = false"
            @on-visible-change="changeVisible"
            :loading="modal.loading">
            <Form
                ref="formInline"
                :label-width="80"
                :model="formData"
                :rules="customRules">
                <FormItem
                    prop="version"
                    label="版本名称">
                    <Input
                        clearable
                        v-model="formData.version" />
                </FormItem>
                <FormItem
                    prop="productId"
                    label="部件来源">
                    <Select filterable
                        transfer
                        filterable
                        clearable
                        v-model="formData.productId"
                        placeholder="">
                        <Option
                            v-for="item in versionList"
                            :key="item.id"
                            :value="item.id"
                            :title="item.version">{{ item.version }}</Option>
                    </Select>
                </FormItem>
                <FormItem
                    prop="description"
                    label="说明">
                    <Input type="textarea" v-model="formData.description" :rows="3"/>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>
import AssetDetailContent from './asset-detail-content'
import { addNewVersionV2, deleteProduct } from '../api/asset'
import { getProductGroupDetail } from '@/view/testPlatform/asset/api/productGroup.js'

export default {
    name: 'AssetDetail',
    components: {
        AssetDetailContent
    },
    data() {
        return {
            refresh: 0,
            modal: {
                show: false,
                loading: false
            },
            formData: {
                version: '',
                productId: '',
                description: ''
            },
            customRules: {
                version: [
                    { required: true, message: `版本名称不能为空`, trigger: 'blur,change' }
                ],
                productId: [
                    { required: true, message: `部件来源不能为空`, trigger: 'blur,change' }
                ],
            },
            versionList: [],
            tabName: '',
            contextData: null,
            labelRender: data => {
                return h => {
                    return h('div', [
                        h('span', {
                            class: 'navbar-item-content'
                        }, data.version),
                        h('Poptip', {
                            props: {
                                confirm: true,
                                'ok-text': "确定",
                                'cancel-text': "取消",
                                type: 'error',
                                size: 'large',
                                title: `你确定要删除${data.version}吗?`,
                                transfer:true
                            },
                            on: {
                                'on-ok': () => {
                                    this.handleTabRemove(data.id)
                                }
                            }
                        }, [
                            h('Icon', {
                                class: 'navbar-item-icon',
                                props: {
                                    type: 'md-close'
                                },
                            })
                        ])
                    ])
                }
            },
        }
    },
    watch: {
        tabName(val) {
            this.$refs[val] && this.$refs[val][0] && this.$refs[val][0].init()
        }
    },
    mounted() {
        this.getProductVersions();
      this.$store.commit('addBreadItem', { name: this.$route.query.name });
    },
    methods: {
        changeVisible(type) {
            if (!type) {
                this.$refs.formInline.resetFields()
            }
        },
        // 保存版本
        save() {
          let _this = this;
            this.$refs.formInline.validate(valid => {
                if (valid) {
                    this.modal.loading = true
                    let data = {..._this.formData};
                    addNewVersionV2(data).then(({ code, message }) => {
                        if (code !== 1) {
                            this.$Message.warning(message)
                            return
                        }
                        this.$Message.success('添加版本成功')
                        this.modal.show = false
                        this.getProductVersions()
                    }).finally(() => {
                        this.$nextTick(() => {
                            this.modal.loading = false
                        })
                    })
                }
            })
        },
        // 打开添加版本的模态框
        handleTabsAdd() {
            this.modal.show = true
        },
        // 删除版本
        handleTabRemove(id) {
            if (this.versionList.length === 1) {
                this.$Message.warning('不可删除唯一的记录');
                return
            }
            deleteProduct(id).then(({ code, message }) => {
                if (code !== 1) {
                    this.$Message.warning(message)
                    return
                }
                this.$Message.success('删除版本成功')
                this.getProductVersions()
            })
        },
        // 获资产的版本列表
        getProductVersions() {
            if (!this.$route.query.productId) {
                return
            }
            getProductGroupDetail(this.$route.query.productId).then(({ code, message, data }) => {
                if (code !== 1) {
                    this.$Message.warning(message)
                    return
                }
                this.versionList = data || [];
                this.refresh = Math.random() * new Date().getTime()
                // 当前版本不存在了，重新设置
                if (this.versionList.findIndex(item => item.id === this.tabName) === -1) {
                    this.tabName = this.versionList.length ? this.versionList[0].id : ''
                }
            })
        },
    }
}
</script>

<style scoped>
.asset-detail {
    width: 100%;
    height: 100%;
}
.asset-detail .my-tabs {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.asset-detail .my-tabs >>>.ivu-tabs-content{
  flex: 1;
  height: 0;
  padding: 14px;
}
.asset-detail .my-tabs  .my-tab-pane {
  height: 100%;
}
.asset-detail .my-tabs >>> .ivu-tabs-tab .ivu-icon {

    float: right;
    margin-top: 4px;
    margin-left: 6px;
    margin-right: 0;
    cursor: pointer;

}
.asset-detail .my-tabs >>> .ivu-tabs-tab .ivu-icon :hover {
  color: #2d8cf0;
}
</style>
